import React, { useState, useEffect } from 'react';
import { SaveConnection } from '../../wailsjs/go/main/App';
import { Form, Toast, Button, Card, Select } from '@douyinfe/semi-ui';

function LoginPage(props) {
    const [connectionType, setConnectionType] = useState('');
    const [formInfo, setFormInfo] = useState(<></>);

    const handleSubmit = (values) => {
        values['connect_type'] = connectionType;
        if (values['port']) values['port'] = parseInt(values['port']);

        SaveConnection(values).then((id, err) => {
            Toast.info('连接已保存');
            props.updateConnect(null);
        });
    };

    useEffect(() => {
        if (props.connectForm) {
            setConnectionType(props.connectForm.connect_type);
        }
    }, [props.connectForm]);

    useEffect(() => {
        switch (connectionType) {
            case "sqlite":
                setFormInfo(
                    <>
                        <Form.Input field='name' label='Name' style={{ width: '100%' }} placeholder=''></Form.Input>
                        <Form.Input field='db_path' label='DB Path' style={{ width: '100%' }} placeholder=''></Form.Input>
                    </>
                );
                break
            case "mysql":
            case "pgsql":
                setFormInfo(
                    <>
                        <Form.Input field='name' label='Name' style={{ width: '100%' }} placeholder=''></Form.Input>
                        <Form.Input field='host' label='Host' style={{ width: '100%' }} placeholder=''></Form.Input>
                        <Form.Input field='port' label='Port' style={{ width: '100%' }} placeholder=''></Form.Input>
                        <Form.Input field='username' label='Username' style={{ width: '100%' }} placeholder=''></Form.Input>
                        <Form.Input field='password' label='Password' style={{ width: '100%' }} placeholder=''></Form.Input>
                        <Form.Input field='database' label='Database' style={{ width: '100%' }} placeholder=''></Form.Input>
                    </>
                );
                break;
        }

    }, [connectionType]);

    return (
        <div>
            <Card style={{ maxWidth: 500, margin: '0 auto', marginTop: 200, userSelect: 'none' }} bordered={true} headerLine={true} >
                <Form onSubmit={values => handleSubmit(values)} style={{ width: '100%' }}>
                    {({ formState, values, formApi }) => (
                        <>
                            <Form.Section text={connectionType ? connectionType.charAt(0).toUpperCase() + connectionType.slice(1) + ' Connection' : 'Select Driver'}>
                                <Select field="Role" label='Connection Type' onSelect={(value) => setConnectionType(value)} style={{ width: '100%', userSelect: 'none' }}>
                                    <Select.Option value="mysql">MySQL</Select.Option>
                                    <Select.Option value="sqlite">SQLite</Select.Option>
                                    <Select.Option value="pgsql">PostgreSQL</Select.Option>
                                </Select>
                                {formInfo}
                                <div style={{ display: !connectionType ? 'none' : 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                    <Button htmlType='submit' type="tertiary">Test</Button>
                                    <Button htmlType='submit' type="tertiary">Save</Button>
                                </div>
                            </Form.Section>
                        </>
                    )}
                </Form>
            </Card>
        </div >
    );
}

export default LoginPage;
